import NavBar from "../components/commons/navbar/NavBar.tsx";
import Logo from "../components/commons/Logo.tsx";
import ButtonLogin from "../components/login/ButtonLogin.tsx";
import ButtonRegister from "../components/login/ButtonRegister.tsx";
import Footer from "../components/commons/Footer.tsx";
import {useState} from "react";
import {baseUrl} from "../settings/Settings.ts";
import {useNavigate} from "react-router-dom";
import axios from "axios";


const LoginPage = () => {

    const navigation = useNavigate()

    const [username, setUsername] = useState<string>('');
    const [password, setPassword] = useState<string>('');

    const handleClick = (e: Event | undefined) => {
        e?.preventDefault()
        attemptToLogin()

    }

    const attemptToLogin = async () => {
        try {
            const response = await axios.post(baseUrl + '/api/account/login', {
                username,
                password,
                type: 'user' // or 'manager' depending on the user type
            }, {
                withCredentials: true // send credentials with the request
            });


            const jsonData = response.data;
            console.log(jsonData);

            const cookies = document.cookie.split(';');
            console.log(cookies);

            if (response.status === 200) {
                navigation('/profile');
            }
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };

    return (
        <>
            <NavBar/>
            <main className="d-flex align-items-center justify-content-center flex-column vw-100">

                <div id={"margin-auto"}/>

                <div className="d-flex needs-validation" id="container-login">
                    <form id="form-login">

                        <Logo/>
                        <h1 className="h3 mb-3 fw-normal">Please sign in</h1>
                        <div className="form-floating" id="form-username">
                            <input
                                type="text"
                                value={username}
                                onChange={(event) => setUsername(event.target.value)}
                                className="form-control"
                                name="username"
                                id="floatingUsername"
                                placeholder="Username"
                                required
                            />
                            <label htmlFor="floatingUsername">Username</label>
                        </div>
                        <div className="form-floating mt-2">
                            <input
                                type="password"
                                value={password}
                                onChange={(event) => setPassword(event.target.value)}
                                className="form-control"
                                name="password"
                                id="floatingPassword"
                                placeholder="Password"
                                required
                            />
                            <label htmlFor="floatingPassword">Password</label>
                        </div>
                        <ButtonLogin handleClick={() => handleClick(event)}/>
                        <ButtonRegister/>
                    </form>


                </div>


                <div id={"margin-auto"}/>
                <Footer/>
            </main>
        </>


    )
}

export default LoginPage